<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
 
	    <script src="./node_modules/echarts/dist/echarts.js"></script>
        <script src="./vu2js.js"></script>
        <style>
            #app {
                width: 1400px;
                margin: 100px auto
            }
            #main {
                width: 1400px;
                height: 500px;
            }
        </style>
	</head>
	<body>
		<div id="app">
            <div id="main"></div>
        </div>
	</body>
</html>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataList: [],
            showDataList: [],
        },
        created() {
        },
        mounted() {
            // 初始化echars的option
            let option = {
                legend: {},
                tooltip: {},
                dataset: {
                    source: []
                },
                xAxis: { type: 'category' },
                yAxis: {},
                series: []
            };
            // 模拟接口拿数据
            this.getDataListPromise().then(res => {
                this.dataList = res

                // 转换格式
                let months =  this.dataList.map(item => item["month"])
                months = [...new Set(months)].sort((a,b)=> Number(a)-Number(b))

                let format =  this.dataList.map(item => item["testMethod"])
                format = [...new Set(format)]
                // 获取12个月份数据
                this.showDataList = months.map(item => {
                    // 获取4个维度数据
                    let itemArr = [item]
                    format.forEach(mat => {
                        let matFind = this.dataList.find(data => data['month'] == item && data['testMethod'] == mat)
                        if (matFind) {
                            itemArr.push(matFind.detectionQuantity)
                        } else {
                            itemArr.push(0)
                        }
                    })
                    return itemArr
                })
                this.showDataList.unshift(['month', ...format])   
                
                option.dataset.source = this.showDataList
                option.series = format.map(item => ({ type: 'bar' }))

                // 初始化echars
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                myChart.setOption(option);
            })
            
        },
        methods: {
            getDataListPromise() {
                return new Promise(resolve => {
                    let data = [
                        {
                            "contractingUnit": null,
                            "detectionQuantity": 264,
                            "detectionUnit": null,
                            "month": "01",
                            "projectDetectionTotal": 0,
                            "testMethod": "RT",
                            "totalDetectionQuantity": 0
                        },
                        {
                            "contractingUnit": null,
                            "detectionQuantity": 6,
                            "detectionUnit": null,
                            "month": "02",
                            "projectDetectionTotal": 0,
                            "testMethod": "RT",
                            "totalDetectionQuantity": 0
                        },
                        {
                            "contractingUnit": null,
                            "detectionQuantity": 8,
                            "detectionUnit": null,
                            "month": "02",
                            "projectDetectionTotal": 0,
                            "testMethod": "UT",
                            "totalDetectionQuantity": 0
                        },
                        {
                            "contractingUnit": null,
                            "detectionQuantity": 28,
                            "detectionUnit": null,
                            "month": "03",
                            "projectDetectionTotal": 0,
                            "testMethod": "RT",
                            "totalDetectionQuantity": 0
                        },
                        {
                            "contractingUnit": null,
                            "detectionQuantity": 110,
                            "detectionUnit": null,
                            "month": "04",
                            "projectDetectionTotal": 0,
                            "testMethod": "RT",
                            "totalDetectionQuantity": 0
                        },
                        {
                            "contractingUnit": null,
                            "detectionQuantity": 110,
                            "detectionUnit": null,
                            "month": "09",
                            "projectDetectionTotal": 0,
                            "testMethod": "dsa",
                            "totalDetectionQuantity": 0
                        },
                        {
                            "contractingUnit": null,
                            "detectionQuantity": 110,
                            "detectionUnit": null,
                            "month": "12",
                            "projectDetectionTotal": 0,
                            "testMethod": "zkh",
                            "totalDetectionQuantity": 0
                        }
                    ]
                    resolve(data)
                })
            }
        }
    })
</script>

